<template>
  <div class="home" style="border: 1px solid blue">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <h1> 这里是父组件： {{ title }} </h1> -->
    <!-- <son :message="fData"></son> -->
    <!-- <son @getMessage="showMsg"></son> -->
    <!-- <ebutton>
      <template v-slot:btn>{{ btnName }}</template>
      <template v-slot:one="slotOne"> {{ slotOne.data1 }} </template>
      <template v-slot:default="soltDefault">
        {{ soltDefault.data2 }}
      </template>
    </ebutton> -->
    <!-- <template v-slot:one>222</template>
      <template v-slot:two>123</template>
      <template v-slot:three>123</template> -->
    <!-- <template slot="one">222</template>
      <template slot="two">123</template>
      <template slot="three">123</template> -->
    <!-- <div>从子组件过来的数据是：{{ msgFromSon }}</div>
    <son :sendToSon="fData" @msgFromSon="getSonMsg"></son> -->

    <!-- 直接使用实验 -->
    <p>
      Clicked: {{ $store.state.counter.message }}
    </p>
    <!-- 使用辅助函数 -->
    <p>
      mapState: {{ counter.message }}
    </p>
    <!-- vuex 使用实验 -->
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>

    <!-- 在 Vuex 中如果不用计算属性，我们需要这么写 -->
    <p>Original message: "{{ this.$store.state.counter.message }}"</p>
    <p>
      Computed reversed message: "{{
        this.$store.state.counter.message.split("").reverse().join("")
      }}"
    </p>

    <button @click="setMessage">调用 mutations</button>
    <button @click="asyaddNum">调用 actions</button>
  </div>
</template>

<script>
// @ is an alias to /src
import Son from "@/views/son.vue";
import Ebutton from "@/views/slot.vue";
import { mapState, mapGetters } from "vuex";

export default {
  name: "HomeView",

  components: {
    Son,
    Ebutton,
  },

  data() {
    return {
      fData: "这里是父组件向子组件传过来的值值：prop方式",
      title: "",
      btnName: "父组件传插槽值",
      msgFromSon: "",
      message: "helloWorld",
    };
  },

  computed: {
    // ...mapState({
      // counter: state => state.counter
      // count: 'counter'
    // }),
    ...mapState(['counter']),
    // ...mapGetters(''),
    reversedMessage: function () {
      // return this.message.split("").reserve().join("");
      return this.message.split("").reverse().join("");
    },
  },

  methods: {
    showMsg(title) {
      this.title = title;
    },
    getSonMsg(msg) {
      this.msgFromSon = msg;
    },
    setMessage() {
      this.$store.commit("changeMsg", "你好啊");
    },
    asyaddNum() {
      // this.$store.dispatch('asyaddNum')
      this.$store.dispatch('asyaddNum').then((data) => {
        console.log(data);
      })
      // this.$store.dispatch("asyaddNum", {
      //   data: "传递的数据",
      //   success() {
      //     console.log(this);
      //     console.log(this.data);
      //   },
      // });
    },
  },
};
</script>
